<template>
  <div class="loginContainer">
    <el-form ref="registerForm" :model="registerForm" class="login-form" label-width="78px" :rules="rules">
      <h3 class="title">欢迎注册</h3>
      <el-form-item prop="username" label="用户名">
        <el-input type="text" auto-complete="off" placeholder="请设置用户名" v-model.trim="registerForm.username"></el-input>
      </el-form-item>
      <el-form-item prop="password" label="密码">
        <el-input type="password" auto-complete="off" placeholder="请设置登录密码" v-model.trim="registerForm.password"></el-input>
      </el-form-item>
      <el-form-item prop="rePassword" label="确认密码">
        <el-input type="password" auto-complete="off" placeholder="请再次设置登录密码" v-model.trim="registerForm.rePassword"></el-input>
      </el-form-item>
			<el-form-item prop="realName" label="姓名">
        <el-input type="text" auto-complete="off" placeholder="请输入姓名" v-model="registerForm.realName"></el-input>
      </el-form-item>
      <el-form-item prop="phone" label="手机号">
        <el-input type="text" auto-complete="off" placeholder="可用于登录和找回密码" v-model.trim="registerForm.phone"></el-input>
      </el-form-item>
      <el-form-item prop="gender" label="性别">
        <el-select v-model="registerForm.gender" placeholder="请选择" style="width: 100%">
					<el-option
						v-for="item in genders"
						:key="item.value"
						:label="item.label"
						:value="item.value">
					</el-option>
        </el-select>
      </el-form-item>
			<el-form-item prop="age" label="年龄">
        <el-input type="age" auto-complete="off" placeholder="年龄" v-model.number="registerForm.age"></el-input>
      </el-form-item>
      <el-button :loading="loading" type="primary" style="width:100%" @click.native="register">
        <span v-if="!loading">注 册</span>
        <span v-else>注 册 中...</span>
      </el-button>
      <span style="float:right; margin-top: 10px; font-size: 14px">已有账号？<router-link to="/login">立即登录</router-link></span>
    </el-form>
  </div>
</template>

<script>
export default {
    name: 'Register',
    data() {
			var checkUsername = (rule, value, callback) => {
				if (!value) {
					callback(new Error('请设置用户名'))
				} else {
					this.getRequest('/portal/user/check/' + this.registerForm.username).then(resp => {
						if (resp.status === 21) {
							callback(new Error('用户名已存在'));
						} else {
							callback();
						}
					});
				}
			};
			var checkPassword = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请设置登录密码'));
				} else {
					if (this.registerForm.rePassword !== '') {
            this.$refs.registerForm.validateField('rePassword');
          }
          callback();
				}
			};
			var checkRePassword = (rule, value, callback) => {
				if (value === '') {
          callback(new Error('请再次设置登录密码'));
        } else if (value !== this.registerForm.password) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
			};
			var checkAge = (rule, value, callback) => {
				if (!value) {
          return callback(new Error('年龄不能为空'));
        }
				setTimeout(() => {
          if (!Number.isInteger(value)) {
            callback(new Error('年龄必须为数字值'));
          } else {
            callback();
          }
        }, 100);
			};
    	return {
    	  loading: false,
    	  registerForm: {
    	    username: "",
    	    password: "",
    	    rePassword: "",
    	    phone: "",
    	    gender: "1",
    	    age: null,
					realName: ""
					},
				genders: [
					{ value: '1', label: '男' },
					{ value: '2', label: '女' },
					{ value: '3', label: '保密' }
				],
				rules: {
					username: [
						{ min: 4, max: 16, message: '用户名长度在 4 到 16 个字符'},
						{ pattern: /^[a-zA-Z]\w*$/, message: '用户名须以字母开头，字母数字下划线组合'},
						{ required: true, validator: checkUsername, trigger: 'blur' }
					],
					password: [
						{ required: true, validator: checkPassword, trigger: 'blur'},
						{ min: 6, max: 18, message: '密码长度在 6 到 18 个字符'}
					],
					rePassword: [
						 { required: true, validator: checkRePassword, trigger: 'blur' }
					],
					realName: [
						{ required: true, message: '请输入姓名', trigger: 'blur'}
					],
					phone: [
						{ required: true, message: '请输入手机号', trigger: 'blur'},
						{ pattern: /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/, message: '请输入正确的手机号'}
					],
					gender: [
						{ required: true, message: '请选择性别', trigger: 'blur'}
					],
					age: [
						{ required: true, validator: checkAge, trigger: 'blur' }
					]
				}
    	}
    },
	created () {
	},
	methods: {
		register () {
			this.$refs.registerForm.validate(valid => {
				if(valid && !this.loading) {
					this.loading = true;
					this.postRequest("/portal/user/register", this.registerForm).then(resp => {
						this.$router.replace('/login')
					})
				}
			})
		}
	}
}
</script>

<style lang="scss">

</style>